<template>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="注册" name="register"></van-tab>
      <van-tab title="登录" name="login"></van-tab>
    </van-tabs>
    <div class="form">
      <van-field v-model="phone" name="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]">
        <template #label>
          <SvgIcon name="手机号" style="color: #808080;" :size="18" />
        </template>
      </van-field>
      <van-field v-model="password" type="password" name="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]">
        <template #label>
          <SvgIcon name="密码" style="color: #808080;" :size="18" />
        </template>
      </van-field>
      <div class="Verification" v-if="active === 'register'">
        <van-field v-model="verification" style="width: 200px; margin-right: 12px;" placeholder="请输入验证码" />
        <van-button @click="getVerification">{{ codeMessage }}</van-button>
      </div>
      <div class="Forgot" v-else>
        <span>忘记密码</span>
      </div>
      <div style="margin: 30px;">
        <van-button @click="submit" round block type="primary" native-type="submit">
          {{ active === 'register' ? "注册" : "登录" }}
        </van-button>
      </div>
<!--      <div style="margin: 30px;" v-if="active !== 'register'">-->
<!--        <van-button @click="alertShowFn('密码错误')" round block type="primary" native-type="submit">-->
<!--          登录-->
<!--        </van-button>-->
<!--      </div>-->
      <div class="footer">
        <van-checkbox-group v-model="checked" shape="square">
          <van-checkbox icon-size="16px" name="a">我已阅读并同意<span style="color: #456CFF;">《服务协议》</span>和<span
              style="color: #456CFF;">《隐私政策》</span></van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="alert" ref="alert">
      <SvgIcon name="失败" style="color: #fff;margin-right: 6px;" :size="18" />
      {{ errerMessage }}
    </div>
  </div>
</template>

<script setup>
import { login, getCaptcha, register } from '@/api';
import { ref } from 'vue'
const active = ref('')
const checked = ref()
const phone = ref('')
const password = ref('')
const alert = ref(null)
const verification = ref('')
const errerMessage = ref('')
const codeMessage = ref('获取验证码')
const alertShowFn = (message) => {
  errerMessage.value = message
  alert.value.style.bottom = '80px'
  alert.value.style.opacity = '1'
  setTimeout(() => {
    alert.value.style.opacity = '0'
    alert.value.style.bottom = '50px'
  }, 3000);
}

// 校验
// const verify = {
//   phone: () => phone.value.length !== 11,
//   password: () => !!password.value,
//   code: () => !!verification.value,
//   all: function () {
//     console.log(this)
//     return this.phone() && this.password() && this.code()
//   }

// }

const getVerification = async () => {
  if (phone.value.length !== 11) {
    alertShowFn('请输入正确的手机号')
    return
  }
  if (codeMessage.value === '获取验证码') {
    try {
      const fordata = new FormData()
      fordata.append('phone', phone.value)
      const code = await getCaptcha(fordata)
    } catch (error) {
      console.log(error)

    }
    codeMessage.value = 60
    let timer = setInterval(() => {
      codeMessage.value--
      if (codeMessage.value === 0) {
        clearInterval(timer)
        codeMessage.value = '获取验证码'
      }
    }, 1000);
  }

}

const loginFn = async () => {
  try {
    const { data, code } = await login({
      phone: phone.value,
      password: password.value
    })
    console.log(data)
    if (code === 200) {
      localStorage.setItem('token', data.token)
      alertShowFn('登录成功')
      FlutterLoginSuccess.postMessage(JSON.stringify({ phone: phone.value, token:data.token,userName:"",userId:data.userId }));
    } else {
      alertShowFn('账号或密码错误')
    }

  } catch (error) {
    alertShowFn('网络错误！')
    console.log(error)
  }

}
const registerFn = async () => {
  try {
    const { data,code,msg } = await register({
      phone: phone.value,
      password: password.value,
      code: verification.value
    })
    if (code === 200) {
      active.value = 'login'
    } else {
      alertShowFn('注册失败:' + msg)
    }


  } catch (error) {

  }
}


const submit = async () => {


  if (phone.value.length !== 11) {
    alertShowFn('请输入正确的手机号')
    return
  }
  if(checked.value === undefined || checked.value.length == 0){
    alertShowFn('请勾选隐私协议')
    return
  }
  active.value === 'login' ? loginFn() : registerFn()



}
</script>

<style lang="scss" scoped>
:deep(.van-tabs__wrap) {
  padding: 0 90px;
  margin-top: 108px;

  .van-tabs__nav {
    background-color: transparent;

    .van-tab--line {
      height: 30px;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;

      .van-tab__text {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.form {
  padding: 0 32px;
  margin-top: 48px;

  .Verification {
    display: flex;

    :deep(.van-button--default) {
      background-color: transparent;
      width: 110px !important;

    }
  }

  .Forgot {
    display: flex;
    justify-content: end;

    span {
      color: #456CFF;
      font-size: 14px;
      cursor: pointer;
    }
  }
}

.footer {
  margin-top: 30px;

  :deep(.van-checkbox__label) {
    color: #333;
    font-size: 14px;
  }
}

:deep(.van-field) {
  background-color: transparent;
  border-radius: 6px;
  border: 1px solid #DEDEDE;
  margin-bottom: 10px;
  justify-content: start;

  .van-field__label {
    width: 20px;
    display: flex;
    margin-right: 10px;
    align-items: center;
  }
}

.alert {
  display: flex;
  position: absolute;
  transition: all 1s;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: max-content;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #E7E6EA;
  background: #FFF;
  font-size: 14px;
  /* shadow/一级下拉菜单 */
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}
</style>
